import { Menu, Icon } from 'antd';

const SubMenu = Menu.SubMenu;
const ItemMenu = Menu.Item;
import cloneDeep from 'lodash/cloneDeep';
import objectAssign from 'object-assign';

class WeaMenuInline extends React.Component {
  constructor(props) {
    super(props);
    const openKeys = this.getOpenKeys(props.defaultSelectedKey, props.datas);
    // console.log("openKeys1:",openKeys);
    this.state = {
      mode: props.mode || 'Inline',
      datas: props.datas || [],
      inlineWidth: props.inlineWidth || 197,
      verticalWidth: props.verticalWidth || 61,
      openKeys: openKeys || [],
      selectedKey: props.defaultSelectedKey || '', // 包含SubMenu，只做单选
      defaultSelectedKey: props.defaultSelectedKey || '', // 包含SubMenu，只做单选
      canClick: true,
    };
  }

  componentWillReceiveProps(nextProps) {
    const openKeys = this.getOpenKeys(nextProps.defaultSelectedKey, nextProps.datas);
    if (JSON.stringify(this.props.datas) !== JSON.stringify(nextProps.datas) || (this.props.defaultSelectedKey !== nextProps.defaultSelectedKey && this.state.defaultSelectedKey !== nextProps.defaultSelectedKey)) {
      // 计算出openKeys
      const newProps = {
        datas: nextProps.datas || [],
        openKeys: openKeys || [],
        defaultSelectedKey: nextProps.defaultSelectedKey || '',
        selectedKey: nextProps.defaultSelectedKey || '',
      };
      this.setState(newProps);
    }
  }

  componentDidMount() {

  }

  render() {
    const { mode, datas, inlineWidth, verticalWidth } = this.state;
    const { openKeys, selectedKey, defaultSelectedKey } = this.state;
    const style = { width: inlineWidth };
    const that = this;
    return (
      <Menu
        ecId={`${this && this.props && this.props.ecId || ''}_Menu@wixnlj`}
        openAnimation={() => {}}
        inlineIndent={verticalWidth / 2 - 9}
        mode={mode}
        openKeys={openKeys}
        selectedKeys={[]}
        onOpen={(e) => { that.changeOpen(e.openKeys); }}
        onClose={(e) => { that.changeOpen(e.openKeys); }}
        onClick={(e) => { that.changeSelectedKey(e.key, that.getDataByKey(e.key, datas), 0); }}
      >
        {this.renderMenuItem(datas, 1, this.props.ecId || '')}
      </Menu>
    );
  }

  getOpenKeys(key, datas) {
    const data = this.getDataByKey(key, datas);
    const treeKey = data.treeKey;
    const treeKeyArr = treeKey ? treeKey.split('{$}') : [];
    return treeKeyArr;
  }

  onModeChange() {
    const { mode } = this.state;
    if (typeof this.props.onModeChange === 'function') {
      this.props.onModeChange(mode);
    }
  }

  getDataByKey(key, datas) {
    const that = this;
    let obj = '';
    for (let i = 0; i < datas.length && obj == ''; i++) {
      if (datas[i].id == key) {
        obj = cloneDeep(datas[i]);
      }
      if (obj == '' && datas[i].child && datas[i].child.length > 0) {
        obj = that.getDataByKey(key, datas[i].child);
      }
    }
    return obj;
  }

  changeSelectedKey(key, data, type) {
    	const { canClick } = this.state;
    const { clickBlock } = this.props;
    	const that = this;
    	if (canClick) {
	        this.setState({
	        	canClick: false,
	            selectedKey: key,
	        });
	        if (typeof this.props.onSelect === 'function') {
	            this.props.onSelect(key, data, type);
	        }
	        setTimeout(() => { that.setState({ canClick: true }); }, clickBlock || 300);
    	}
  }

  changeOpen(openKeys) {
    this.setState({
      openKeys,
    });
  }

  renderMenuItem(datas, level,ecId) {
    const selectedClassName = 'crm-wea-menu-selected';
    const that = this;
    const { selectedKey, canClick } = this.state;
    const datasArr = new Array();
    for (let i = 0; i < datas.length; i++) {
        	const data = datas[i];
      const isSubMenu = data.child && data.child.length > 0;
      const isSelected = selectedKey == data.id || `verTop_${selectedKey}` == data.id;
      if (data.isInlineHide !== 'true') {
	            if (isSubMenu) {
	                datasArr.push(
  <SubMenu
              ecId={`${ecId}_SubMenu@cwxsf1@sm`}
              disabled={!canClick}
              selectedClassName={isSelected ? selectedClassName : ''}
              key={data.id}
              onTitleClick={(e) => { that.changeSelectedKey(e.key, data, 0); }}
              title={that.renderTitle(data, level)}
            >
              {that.renderMenuItem(data.child, level + 1,ecId)}
            </SubMenu>,
	                );
	            } else {
	                datasArr.push(
  <ItemMenu
              ecId={`${ecId}_ItemMenu@xwck9y@im`}
              className={isSelected ? selectedClassName : ''}
              key={data.id}
            >
              {that.renderTitle(data, level)}
            </ItemMenu>,
	                );
	            }
      }
    }
    return datasArr;
  }

  renderTitle(data, level) {
    	const { verticalWidth, tipVisible } = this.state;
    	const that = this;
    const needImg = level == 1;
    const showImg = needImg && data.icon && data.icon != '';
    const underLineStyle = data.hasUnderLine == 'true' ? { borderBottom: '1px solid #bbb' } : {};
    const topLineStyle = data.hasTopLine == 'true' ? { borderTop: '1px solid #bbb' } : {};
    const borderStyle = objectAssign({ height: 42, position: 'relative' }, underLineStyle, topLineStyle);
    const iconMarginR = verticalWidth / 2 - 9;
    const urlIcon = <img className="wea-titleUrlIcon" style={{ position: 'absolute', right: 20, top: 13 }} align="middle" src={data.titleUrlIcon} width="16px" height="16px" onClick={(e) => { that.changeSelectedKey(e.key, data, 1); e.stopPropagation(); }} />;
    return (
      <div style={borderStyle}>
        <span title={data.name} className="crm-wea-menu-tip-out">
          <i style={{ fontSize: '18px', verticalAlign: 'middle', marginRight: iconMarginR }} className={`${'wevicon wevicon-menu-default' + ' ' + 'wevicon-menu-'}${data.levelid}`} />
          {data.tagColor ? <span style={{ display: 'inline-block', width: 10, height: 10, verticalAlign: 'middle', border: '1px solid #bbb', backgroundColor: data.tagColor }} /> : ''}
          <span className="crm-wea-menu-tip-inner" style={needImg ? {} : { marginLeft: 12 }}>{data.name}
            {data.count &&
            <span>(<span id={data.countId}>{data.count}</span>)</span>
            }
          </span>
        </span>
        <span id={`num_${data.numId}`} style={{ position: 'absolute', top: 0, right: 0 }} />
        {data.titleUrlIcon ? urlIcon : ''}
      </div>
    );
  }
}

export default WeaMenuInline;
